<template>
<div style="padding:20px 20px 0 20px;">
    <el-table :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"  max-height="450">
      <el-table-column v-for="(item,index) in title" :key="index" 
        :fixed= "index == 'date' ? true : false" align="center" 
        :prop="index" :label="item" :fit = true>
        </el-table-column>
        <!-- <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="province" label="省份" width="120"></el-table-column>
        <el-table-column prop="city" label="市区" width="120"></el-table-column>
        <el-table-column prop="address" label="地址" width="300"></el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
        <el-table-column prop="province" label="省份" width="120"></el-table-column>
        <el-table-column prop="city" label="市区" width="120"></el-table-column>
        <el-table-column prop="address" label="地址" width="300"></el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"></el-table-column> -->
        <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    class="fen"
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pagesize"
    :page-sizes="[2, 10, 20, 40]"      
    layout="total, sizes, prev, pager, next, jumper"
    :total="list.length">
    </el-pagination>
</div>
</template>
<script>
export default {
  name: 'app-table',
  props:['list','title'],
  data () {
        return {
           
            currentPage:1, //初始页
            pagesize:10, //每页的数据
            show_page:true,
            nowpage:1,
            maxpage:10,
        }
    },
  methods: {
    handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
            this.currentPage = currentPage;
            console.log(this.currentPage)  //点击第几页
    },
    changeLeft($event){
      $event.currentTarget.className="active";
    },
    removeLeft($event){
      $event.currentTarget.className ="tdclass";
    },
  },
  created: function() {
    console.log(this.title);
  }
};
</script>
<style>
.fen{text-align:center;}
</style>